<template>
  <div class="supervision-left">
    <div class="supervision-left-top" style="cursor: pointer;" @click="gohome">
      <img src="@/assets/img/townPreview/回到首页.png" alt="">
      <span>回到首页</span>
    </div>
    <div class="supervision-left-content">
      <div v-for="(item, index) in list" :key="index" class="supervision-left-content-box">
        <div class="supervision-left-content-item">
          <div class="supervision-left-content-item-title">{{ item.title }}</div>
          <div v-if="index===0" class="supervision-left-content-item-XXTD">
            <div class="supervision-left-content-item-XXTD-title">上级转移未付</div>
            <div v-for="(item1, index1) in item.children" :key="index1" class="supervision-left-content-item-XXTD-children">
              <div class="supervision-left-content-item-XXTD-children-img">
                {{ item1.num }}
              </div>
              {{ item1.title }}
            </div>
          </div>
          <div v-else class="supervision-left-content-item-echart">
            <VEcharts
              autoresize
              :options="item.options"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';

export default {
  name: 'Left',
  components: {
    VEcharts
  },
  props: {
    list: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {};
  },
  methods: {
    gohome() {
      this.$router.push('/');
    }
  }
};
</script>

<style lang="scss" scoped>
.supervision-left{
  padding: 1%;
  color: #1fd2ff;
  .supervision-left-top {
    border: 1px solid #1fd2ff;
    border-radius: 9px;
    padding: 5px 25px;
    height: 34px;
    text-align: center;
    img {
      vertical-align: middle;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
    }
  }
  .supervision-left-content{
    height: calc(100% - 34px);
    padding-top: 1%;
    .supervision-left-content-box{
      padding-top: 5%;
      height: 33%;
      .supervision-left-content-item {
        background-image: url('~@/assets/images/fullscreen/xmlx.png');
        height: 100%;
        background-size: 100% 100%;
        .supervision-left-content-item-title{
          height: 20%;
          padding-left: 10%;
          padding-top: 5%;
          font-size: 18px;
        }
        .supervision-left-content-item-XXTD{
          height: 80%;
          position: relative;
          display: flex;
          justify-content: space-around;
          .supervision-left-content-item-XXTD-title{
            position: absolute;
            width: 100%;
            text-align: center;
          }
          .supervision-left-content-item-XXTD-children{
            width: 40%;
            height: 100%;
            padding-top: 5%;
            text-align: center;
            .supervision-left-content-item-XXTD-children-img{
              height: 70%;
              background-size: 100% 100%;
              background-image: url('~@/assets/images/fullscreen/sixBorder.png');
              text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #f6bd16;
              text-shadow: 0px 2px 4px 0px rgba(0,0,0,0.35);
              font-family: LiquidCrystal, LiquidCrystal-Regular;
              font-size: 24px;
            }
          }
        }
        .supervision-left-content-item-echart{
          height: 80%;
          padding-right: 5%;
        }
      }
    }
  }
}
</style>
